<!-- 日期时间选择器组件 -->
<template>
  <van-action-sheet v-model:show="isVisible" title="选择日期时间">
    <div class="date-picker-container">
      <nut-date-picker
        v-model="selectedDate"
        type="datetime"
        :min-date="minDate"
        :max-date="maxDate"
        :three-dimensional="false"
        @confirm="onConfirm"
      ></nut-date-picker>
    </div>
  </van-action-sheet>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue';

export default defineComponent({
  name: 'DatetimePicker',
  
  props: {
    minDate: {
      type: Date as PropType<Date>,
      default: () => new Date()
    },
    maxDate: {
      type: Date as PropType<Date>,
      default: () => new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000)
    }
  },
  
  emits: ['confirm'],
  
  setup(props, { emit }) {
    const isVisible = ref(false);
    const selectedDate = ref(new Date());
    
    // 显示日期选择器
    const show = () => {
      isVisible.value = true;
    };
    
    // 隐藏日期选择器
    const hide = () => {
      isVisible.value = false;
    };
    
    // 处理确认事件
    const onConfirm = (options: { selectedValue: string[] }) => {
      isVisible.value = false;
      
      // 将选择的值转换为Date对象
      const year = parseInt(options.selectedValue[0]);
      const month = parseInt(options.selectedValue[1]) - 1; // 月份从0开始
      const day = parseInt(options.selectedValue[2]);
      const hour = parseInt(options.selectedValue[3]);
      const minute = parseInt(options.selectedValue[4]);
      
      const selectedDateObj = new Date(year, month, day, hour, minute);
      
      // 触发确认事件
      emit('confirm', selectedDateObj);
    };
    
    return {
      isVisible,
      selectedDate,
      show,
      hide,
      onConfirm
    };
  }
});
</script>

<style lang="scss" scoped>
.date-picker-container {
  width: 100%;
  padding: 16px 0;
}
</style> 